Video Title: Build an AI Voice Dental Assistant with Next.js & Postgres - Full SaaS Tutorial
Video ID: MhGV5TekJ8Y
Video URL: https://www.youtube.com/watch?v=MhGV5TekJ8Y
Export Date: 2025-11-06 20:50:32
Channel: Codesistency
Format: markdown
================================================================================

# Building Dentwise: A Modern Dental Platform with AI Voice Assistant and Full-Stack Functionality

In today’s post, we’ll explore the journey of building **Dentwise**, a comprehensive dental platform featuring a sleek landing page, appointment booking system, admin dashboard, and an AI-powered voice assistant. This project leverages cutting-edge technologies including Next.js, Tailwind CSS, Prisma, Clerk, and VPY AI, wrapped in a seamless full-stack development experience.

---

## Overview of Dentwise Features

Dentwise is designed to offer users a unified platform for dental care management:

- **Modern Landing Page:** Eye-catching UI with gradients, animations, and responsive design.
- **Authentication:** Supports sign-up/sign-in via Google, GitHub, and email/password with six-digit verification.
- **Appointment Booking:** A guided three-step process—select dentist, choose service/date/time, and confirm booking with email notifications.
- **Admin Dashboard:** Manage doctors, appointments, and monitor analytics with real-time updates.
- **AI Voice Agent:** An interactive voice assistant providing dental info, tips, and support, available on paid subscription plans.
- **Subscription Plans & Payments:** Free and two paid plans with billing optimized for upgrades and prorated payments.
- **Email Notifications:** Automatic appointment confirmations sent using Resend.com.
- **Version Control & Code Quality:** GitHub workflows with branch management, pull requests, and AI-powered code review using CodeRabbit.
- **Deployment:** Hosted on Savala, leveraging developer-friendly features and free credits.

---

## Technology Stack

- **Frontend:** Next.js (app router, server components), Tailwind CSS, ShadCN UI components, Lucide React icons.
- **Backend:** Prisma ORM with PostgreSQL (Neon provider), Clerk for authentication and payments.
- **AI Integration:** VPY AI for voice assistant capabilities.
- **Email:** Resend.com for transactional emails.
- **Developer Tools:** Git & GitHub, CodeRabbit for code reviews.
- **Hosting:** Savala platform.

---

## Development Highlights

### 1. Setting Up Next.js and UI Components

- Initialized a Next.js app with TypeScript, Tailwind CSS, and ShadCN UI for ready-to-use components.
- Customized a dark purple theme using TweakCN.
- Created reusable components for the landing page (header, hero, pricing, footer) with responsive design and animations.

### 2. Authentication with Clerk

- Integrated Clerk to handle user authentication effortlessly with pre-built UI components.
- Supported multiple sign-in methods and email verification.
- Synced authenticated users from Clerk to the local database using a server action, ensuring data consistency.

### 3. Database Design with Prisma

- Defined models for `User`, `Doctor`, and `Appointment` with relations and enums (e.g., gender, appointment status).
- Leveraged Prisma to generate type-safe database queries.
- Implemented cascading deletes for appointments when users or doctors are removed.

### 4. Admin Dashboard

- Built a secure admin page with environment variable-controlled access.
- Features include doctor management (add/edit profiles with avatars), viewing and updating appointment statuses.
- Used React Query (TanStack Query) for efficient data fetching and cache invalidation.
- Added UI components for stats, welcome messages, doctor lists, and recent appointments.

### 5. Subscription Plans and Payments

- Created plans (Free, AI Basic, AI Pro) in Clerk dashboard with features and pricing.
- Integrated Clerk’s billing UI for managing subscriptions.
- Implemented logic to check user plan status for feature access control.
- Handled plan upgrades with prorated payments.

### 6. AI Voice Assistant Integration

- Used VPY AI to develop an interactive voice assistant named Riley.
- Configured assistant with system prompts and first messages to guide conversations about dental services.
- Implemented client-side widget handling call lifecycle events, messages, and speech animation.
- Enabled voice agent access exclusively for paid subscribers.

### 7. Appointment Booking Workflow

- Developed a step-by-step appointment booking UI:
  - Step 1: Dentist selection from active doctors.
  - Step 2: Appointment type, date, and available time selection with real-time slot availability.
  - Step 3: Booking confirmation with summary and modification options.
- Server actions validate and create appointments linked to users and doctors.
- Implemented optimistic UI updates and error handling with toasts.
- Displayed user’s upcoming and past appointments with detailed info.

### 8. Email Notifications with Resend.com

- Configured transactional email sending via API route.
- Built React email templates for appointment confirmations.
- Ensured email delivery with domain management and API keys.
- Sent detailed appointment info including doctor, date/time, service, and pricing.

### 9. Deployment with Savala

- Prepared the app for production including Prisma generate in build scripts.
- Deployed on Savala with environment variables configured for Clerk, database, VPY, and Resend.
- Used Next.js’ `unoptimized` image setting to resolve image loading issues.
- Verified full live functionality including authentication, booking, AI voice, admin controls, and emails.

---

## Developer Workflow & Best Practices

- **Git Branching:** Created feature branches for landing page, Prisma schema, admin page, pro page, voice page, dashboard, appointments, email sending, and deployment.
- **Pull Requests & Code Review:** Leveraged CodeRabbit AI to identify improvements, errors, and best practices before merging.
- **Server Actions & Client Hooks:** Followed a clean separation of server-side logic and client-side React hooks using Next.js app router conventions.
- **Environment Variables:** Managed sensitive keys securely and adapted URLs for deployment.
- **UI Reusability:** Utilized ShadCN components and custom components for consistency and efficiency.
- **Error Handling & Loading States:** Provided user feedback during data fetching and mutations.

---

## Conclusion

Building Dentwise has been an exciting journey integrating modern web development with AI capabilities to create a user-friendly, functional dental platform. From setting up authentication and databases to crafting admin tools and voice interactions, this project demonstrates full-stack best practices with scalable technologies.

If you’re interested, the full source code is freely available, and you can leverage this project as a foundational template for similar SaaS platforms.

---

## Ready to Build Your Own?

Whether you’re a developer looking to expand your skills or a dental professional exploring tech solutions, building a platform like Dentwise is within your reach. Follow along with the detailed tutorials, use the recommended tools, and bring your ideas to life!

---

**Happy coding and here’s to better dental care powered by technology!**